<template>
  <div class="appDetailPage">
    <a-card>
      <!--使用栅格布局-->
      <a-row class="grid-demo" style="margin-bottom: 16px;">
        <a-col flex="auto" class="content-wrapper">
          <h2>{{ appData.appName }}</h2>
          <p>{{ appData.appDesc }}</p>
          <p>应用类型：{{APPTYPE_MAP[appData.appType] }}</p>
          <p>评分策略：{{ SCORINGTYPE_MAP[appData.scoringStrategy] }}</p>
          <p>
            <a-space>
              作者：
              <div :style="{ display: 'flex', alignItems: 'center' }">
                <a-avatar
                        :size="24"
                        :image-url="appData.user?.userAvatar ? appData.user?.userAvatar :myAvatar"
                        :style="{ marginRight: '8px' }"
                />
                <a-typography-text
                >{{ appData.user?.userName ?? "无名" }}
                </a-typography-text>
              </div>
            </a-space>
          </p>
          <p>
            创建时间：{{ dayjs(appData.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </p>
          <a-space size="medium">
            <a-button type="primary" :href="`/answer/do/${id}`"
            >开始答题</a-button
            >
            <a-button type="outline" @click="doShare">分享应用</a-button>
            <a-button type="outline" :href="`/question/add/${appData.id}`" v-if="currentUser.id === appData.user?.id" status="warning">设置题目</a-button>
            <a-button type="outline" :href="`/scoring/add/${appData.id}`" v-if="currentUser.id === appData.user?.id" status="warning">设置评分</a-button>
            <a-button type="outline" :href="`/app/add/${appData.id}`" v-if="currentUser.id === appData.user?.id" status="warning">修改应用</a-button>
          </a-space>
        </a-col>
        <a-col flex="320px">
          <a-image width="100%" :src="appData.appIcon ? appData.appIcon : myAppIcon"></a-image>
        </a-col>
      </a-row>
    </a-card>
    <ShareModal ref="shareModalRef" :link="shareLink" title="应用分享" />
  </div>
</template>

<script setup lang="ts">
  import {defineProps, reactive, ref, watchEffect, withDefaults} from 'vue'
  import {listUserByPageUsingPost} from "@/api/userController";
  import message from "@arco-design/web-vue/es/message";
  import {getAppByIdUsingGet, listAppVoByPageUsingPost} from "@/api/appController";
  import AppCard from "@/components/AppCard.vue"
  import {APPTYPE_MAP,SCORINGTYPE_MAP} from "@/constant/enum";
  import { dayjs } from "@arco-design/web-vue/es/_utils/date";
  import API from "@/api";
  import {useLoginUserStore} from "@/store/userStore";
  import ShareModal from '@/components/ShareModal.vue'
  import {myAppIcon, myAvatar} from '@/constant/photo.ts'

  const defaultPhoto = ref('https://th.bing.com/th/id/OIP.gZVAP6ugodOme1MKEycj9wHaHa?w=181&h=181&c=7&r=0&o=5&dpr=1.3&pid=1.7')

  //获取当前登录用户
  const loginUserStore = useLoginUserStore();
  const currentUser = loginUserStore.loginUser;

  //获取应用的信息
  const appData = ref<API.AppVO>({})

  //获取前页面传过来的id
  interface Props {
    id:string;
  }
  const props = withDefaults(defineProps<Props>(),{
    id:() =>{
      return "";
    }
  })


  //获取数据
  const loadData = async() =>{
    if(!props.id){
      return;
    }
    const res = await getAppByIdUsingGet({
      id:props.id as any
    });
    if(res.data.code === 0){
      appData.value = res.data.data || {};
    }else{
      message.error("获取数据失败" + res.data.message)
    }
  }

  const shareLink = `${window.location.protocol}//${window.location.host}/app/detail/${props.id}`
  const shareModalRef = ref();
  const doShare =(e:Event) =>{
    if(shareModalRef.value){
      shareModalRef.value.handleClick();
    }
  }

  /**
   * 监听 searchParams 变量，改变时触发数据的重新加载
   */
  watchEffect(() =>{
    loadData()
  })
</script>

<style scoped>
  #appDetailPage .content-wrapper > *{
    margin-bottom: 24px;
  }

  .searchBar {
    text-align: center;
    margin-bottom: 28px;
  }

  .list-demo-action-layout .image-area {
    width: 183px;
    height: 119px;
    overflow: hidden;
    border-radius: 2px;
  }

  .list-demo-action-layout .list-demo-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-fill-3);
  }

  .list-demo-action-layout .image-area img {
    width: 100%;
  }

  .list-demo-action-layout .arco-list-item-action .arco-icon {
    margin: 0 4px;
  }
</style>
